<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <!--<el-form-item label="部门" required>
          <el-cascader
            size="mini"
            v-model="value"
            :options="options"
            :clearable="true"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>-->
        <el-form-item label="招聘区域">
          <el-input v-model="area" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="deptName" size="mini" readonly></el-input>
        </el-form-item>

        <el-form-item label="岗位" required>
          <el-input v-model="positionName" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="岗位人数" required>
          <el-input v-model="totalNum" size="mini"></el-input>
        </el-form-item>

        <el-form-item label="拟招聘人数" required>
          <el-input v-model="needNum" size="mini"></el-input>
        </el-form-item>

        <el-form-item label="招聘原因" required>
          <el-radio v-model="reason" label="新增">新增</el-radio>
          <el-radio v-model="reason" label="离职补充">离职补充</el-radio>
          <el-radio v-model="reason" label="调动补充">调动补充</el-radio>
        </el-form-item>
        <el-form-item label="申请人" required>
          <el-input v-model="applicantName" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="申请日期" required>
          <el-input v-model="applicantDate" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="期望到岗时间" required>
          <el-input v-model="exceptTime" size="mini"></el-input>
        </el-form-item>

        <el-form-item label="岗位职责">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" v-model="responsibility" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="任职要求">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" v-model="specification" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="其他说明">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" v-model="other" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <a :href="fileUrl" target="_blank">{{fileName}}</a>
        </el-form-item>

        <el-form-item id="bhreason" style="display: none" label="驳回原因" required>
          <el-input v-model="bhreason" size="mini"></el-input>
        </el-form-item>

        <div class="upload_area">
          <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
            <!--<van-step>
              <h3>{{leader}}</h3>
              <van-image width="60" height="60" :src="leaderImg"/>
            </van-step>-->

            <van-step v-if="oneShow">
              <h3>一级审批</h3>
              <van-image v-for="(item,index) in onespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <van-step v-if="twoShow">
              <h3>二级审批</h3>
              <van-image v-for="(item,index) in twospusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <van-step v-if="threeShow">
              <h3>三级审批</h3>
              <van-image v-for="(item,index) in threespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <van-step v-if="yxshow">
              <h3>{{yxleader}}</h3>
              <van-image width="60" height="60" :src="yxleaderImg"></van-image>
            </van-step>
            <van-step>
              <h3>{{hrleader}}</h3>
              <van-image width="60" height="60" :src="hrleaderImg"/>
            </van-step>

            <van-step>
              <h3>{{bossleader}}</h3>
              <!--<van-image width="60" height="60" :src="boss1leaderImg" style="margin-right: 20px"/>-->
              <van-image width="60" height="60" :src="boss2leaderImg"/>
            </van-step>
          </van-steps>
        </div>

        <van-dialog title="   " v-model="bhshow" show-cancel-button :before-close="chargeBtn" message-align="left">
          <el-form-item label="驳回原因" required>
              <el-input v-model="bhreason" type="textarea" :autosize="{ minRows: 4}"></el-input>
          </el-form-item>
        </van-dialog>


        <el-form-item>
          <!--上下翻页的图标-->
          <el-button-group>
            <el-button v-bind:disabled="pageUpShow" @click="pageUp" size="mini" icon="el-icon-arrow-left"></el-button>
            <el-button v-bind:disabled="pageDownShow" @click="pageDown" size="mini" icon="el-icon-arrow-right"></el-button>
          </el-button-group>

          <el-button id="isAgree" v-bind:disabled="isShow" style="margin-left: 100px" type="primary" size="small" @click="submitAgree">{{message}}</el-button>
          <el-button id="isNotAgree" v-bind:disabled="isShow" type="warning" size="small" @click="submitNotAgree">{{message1}}</el-button>

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Image as VanImage ,Toast,Picker,Popup,Dialog} from 'vant';
  Vue.use(Picker);
  Vue.use(Popup);
  Vue.use(VanImage);
  Vue.use(Dialog)
export default {
  data() {
    return {
      area:"",
      title:"招聘审批",
      nowUser:"",
      id:"",
      deptId:"",
      deptName:"",//部门名称
      posId:"",
      positionName:"",//岗位名称
      totalNum:"",
      needNum:"",
      reason:"",
      applicantName:"",
      applicantDate:"",
      exceptTime:"",
      message:"同意",
      message1:"驳回",
      isShow:false,
      active:"-1",//步骤索引,从0开始
      leader:"",//直接领导
      hrleader:"方先梅",//hr经理
      bossleader:"胡仁华",//上级领导
      leaderImg:"",
      hrleaderImg:"",
      boss1leaderImg:"",
      boss2leaderImg:"",
      yxshow:false,
      yxleader:"徐朕鸿",
      yxleaderImg:"",
      bhreason:"",
      bhshow:false,
      responsibility:"",
      specification:"",
      other:"",
      fileUrl:"",
      fileName:"",

      oneShow:false,
      twoShow:false,
      threeShow:false,
      onespusers:[],
      twospusers:[],
      threespusers:[],
      pageUpShow:true,
      pageDownShow:false,
      approverPathArr:localStorage.getItem('approverPathArr')?JSON.parse(localStorage.getItem('approverPathArr')):[]
    };
  },
  watch:{
    '$route'(){
      if (this.$route.fullPath.indexOf("/sp/applicationDetail/")!=-1){
        this.$router.go(0);//界面刷新
      }
      //location.reload();
    }
  },
  created() {
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    //    alert(JSON.parse(localStorage.getItem('userInfo')).userId);
    this.id=this.$route.params.applicationId;
    //alert(this.$route.params.active);
    this.selLeaderByApplicaId();
    this.getDetail();//找到对应的页面详情，及领导信息

    let pageInPathArrIndex=this.approverPathArr.indexOf(this.$route.fullPath)
    if (pageInPathArrIndex<=0){
      this.pageUpShow=true;
    }else {
      this.pageUpShow=false;
    }
    if (this.approverPathArr.length>pageInPathArrIndex+1){
      this.pageDownShow=false;
    }else {
      this.pageDownShow=true;
    }
  },

  methods: {

    //根据招聘申请的id找到对应的leader
    selLeaderByApplicaId(){
      this.leaderList=[];
      this.leader="";
      this.$https.post('/mobiles/selLeaderByApplicaId', {
        id:this.id
      }).then((res)=>{
        //展示审批流程
        if (res.data.onespusers && res.data.onespusers.length>0){
          this.oneShow=true;
          this.onespusers=res.data.onespusers;
        }else{
          this.oneShow=false;
          this.onespusers=[];
        }
        if (res.data.twospusers && res.data.twospusers.length>0){
          this.twoShow=true;
          this.twospusers=res.data.twospusers;
        }else{
          this.twoShow=false;
          this.twospusers=[];
        }
        if (res.data.threespusers && res.data.threespusers.length>0){
          this.threeShow=true;
          this.threespusers=res.data.threespusers;
        }else{
          this.threeShow=false;
          this.threespusers=[];
        }

        var bossList=res.data.bossleader;
        this.hrleaderImg=bossList[0].avatar;
        this.hrleader=bossList[0].name;
        //this.boss1leaderImg=bossList[1].avatar;
        this.boss2leaderImg=bossList[1].avatar;
        if (bossList.length>2){
          this.yxshow=true;
          this.yxleader=bossList[2].name;
          this.yxleaderImg=bossList[2].avatar;
        }

      }).catch(err => {
        console.log(err);
      })
    },

    //根据传递的招聘申请id获取相应的申请信息
    getDetail(){
      //console.log(id)
      this.$https.post('/mobiles/selApplicationDetail', {
        nowUser:this.nowUser,
        id:this.id,
      }).then((res)=>{
        if (res.data.data.area=="WG"){
          this.area="深圳";
        }else if (res.data.data.area=="HF"){
          this.area="合肥";
        }else if (res.data.data.area=="WH"){
          this.area="武汉";
        }
        this.deptName=res.data.data.deptName;
        this.positionName=res.data.data.positionName;
        this.totalNum=res.data.data.totalNum;
        this.needNum=res.data.data.needNum;
        this.reason=res.data.data.reason;
        this.applicantName=res.data.data.applicantName;
        this.applicantDate=res.data.data.applicantDate;
        this.exceptTime=res.data.data.exceptTime;
        this.responsibility=res.data.data.responsibility;
        this.specification=res.data.data.specification;
        this.other=res.data.data.other;

        this.active=res.data.data.isAgree-1;

        /*this.leader=res.data.data.leaderName;

        this.leaderImg=res.data.data.leaderImg;
        this.hrleader= res.data.data.hrname;
        this.hrleaderImg=res.data.data.hrleaderImg;
        this.boss1leaderImg=res.data.data.boss1leaderImg;
        this.boss2leaderImg=res.data.data.boss2leaderImg;*/
        if (res.data.data.fileNameTip===""){
          this.fileName="暂无"
        }else {
          this.fileName=res.data.data.fileNameTip;
        }
        this.fileUrl=res.data.data.fileNameUrl;

        if (res.data.data.state=='已通过'){
          this.message='已同意';
          this.isShow=true;
        }else if (res.data.data.state=='已驳回'){
          this.message1='已驳回';
          this.isShow=true;
          document.getElementById("bhreason").style.display= "";
          this.bhreason=res.data.data.bhreason;
        }else {
          if (res.data.data.showAgree=="0"){
            this.message='已审核';
            this.isShow=true;
          }
        }


      }).catch(err => {
        console.log(err);
      })
    },


    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 提交同意
    submitAgree() {
      this.isShow=true;
      this.$https.post('/mobiles/isAgree', {
        userId:this.nowUser,
        id:this.id,
      }).then(res => {
        res;
        Toast("已同意");
        this.message='已同意';
        this.isShow=true;
        //this.getDetail();//找到对应的页面详情，及领导信息
        this.removeCurrPath();
        //this.goBack();

      }).catch(err => {
        console.log(err)
      });
    },

    pageUp(){
      this.pageDownShow=false;//往前翻下一页肯定可以点击
      let pageInPathArrIndex=this.approverPathArr.indexOf(this.$route.fullPath)
      let currentIndex=pageInPathArrIndex-1;
      if (currentIndex<=0){
        this.pageUpShow=true;
      }else {
        this.pageUpShow=false;
      }
      this.$router.replace(this.approverPathArr[currentIndex])
    },
    pageDown(){
      this.pageUpShow=false;
      let pageInPathArrIndex=this.approverPathArr.indexOf(this.$route.fullPath)
      let currentIndex=pageInPathArrIndex+1;
      if (this.approverPathArr.length<=currentIndex+1){
        this.pageDownShow=true;
      }else {
        this.pageDownShow=false;
      }
      this.$router.replace(this.approverPathArr[currentIndex])
    },

    //从path数组里面清除掉当前的path
    removeCurrPath(){
      let pageInPathArrIndex=this.approverPathArr.indexOf(this.$route.fullPath)
      this.approverPathArr.splice(pageInPathArrIndex,1);//删除指定索引处的值,后面的往前补上
      if (this.approverPathArr.length<=0){
        this.goBack();
      }
      let nextPath = this.approverPathArr[0];
      if (this.approverPathArr.length>=pageInPathArrIndex+1){
        nextPath = this.approverPathArr[pageInPathArrIndex];
      }
      //this.$route.fullPath;
      this.$router.replace(nextPath)
    },
    //驳回
    submitNotAgree() {
      this.bhshow=true;
      this.isShow=true;
    },
    chargeBtn(action,done){
      if (action==='cancel'){
        done();
      }else if (action==='confirm'){
        this.show=false;
        this.$https.post('/mobiles/isAgree', {
          userId:this.nowUser,
          id:this.id,
          bhreason:this.bhreason,
        }).then(res => {
          res;
          Toast("已驳回");
          this.message1="已驳回";
          this.isShow=true;
          //this.getDetail();//找到对应的页面详情，及领导信息
          this.removeCurrPath();
          //this.goBack();
          done();
        }).catch(err => {
          console.log(err)
        });
      }
    },

  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
}
</style>